<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- stroke-dasharray 设置虚线效果：宽度4 间隔1循环-->
    <!-- 4 1 == 宽度4 间隔1 -->
    <!-- 4 1 2 == 宽度4 间隔1 宽度2 间隔4 宽度1 间隔2循环 -->
    <!-- stroke-dashoffset 设置虚线偏移效果   -->
    <!-- 偏移为正值的时候  会向路径的反方向偏移 -->
    <!-- stroke-linecap 设置路径的端点样式 square 方  butt 直角 round 圆角 -->

    <svg>
      <path d="M100 100H300" stroke="black" stroke-width="20" stroke-dasharray="300" stroke-dashoffset="300" id="myPath"></path>
      <animate href="#myPath" attributeName="stroke-dashoffset" from="300" to="0" dur="3s" fill="freeze"></animate>
    </svg>
  </body>
</html>
